<template>
  <div class="showDialogBox">
    <van-dialog v-model:show="showReadDialog" title="长按二维码，阅读文章10秒" show-cancel-button @cancel="closeshowReadDialog"
      @confirm="confirmDialog" confirm-button-text="阅读完毕后报数">
      <!-- <img src="../assets/qrcode.png" alt=""> -->
      <QRCode value="https://mp.weixin.qq.com/s/UwZQs6kp7t3v2gIE0bKm3Q" linkText="Scan me!" />
      <!-- <a>{{ readValue }}</a> -->
      <p class="red">长按二维码，阅读文章10秒</p>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, } from "vue";
import axios from 'axios'

import { listDetailApi } from "../api/index.js";
import QRCode from "../components/vue-qrcode.vue";
let showReadDialog = ref(true)
//阅读链接
let readValue = ref("")
function closeshowReadDialog() {
  emit("changeReadHim")
}
function confirmDialog() {
  emit("changeReadingReports")
}
const props = defineProps({
  chooseIdSon: {
    type: Number,
    default: 0,
  },
})
const emit = defineEmits(["changeReadHim", "changeReadingReports"])
onMounted(() => {
  console.log(props.chooseIdSon, "props.chooseIdSon");
  getListDetail()
  // 在组件挂载后执行的逻辑，例如初始化数据、订阅事件等
})
async function getListDetail() {
  try {
    let res = await listDetailApi(props.chooseIdSon)
    console.log(res);
    readValue.value = res.data.link
  } catch (err) {
    console.log(err);
  }
}

</script>

<style lang="less" scoped>
.showDialogBox {
  padding: 30px;
  box-sizing: border-box;

  img {
    width: 100%;
  }

  h1 {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    text-align: center;
    font-style: normal;
    text-transform: none;
    padding: 20px 0;
    box-sizing: border-box;
  }

  p {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #8D8D8D;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  h2 {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 12px;
    color: #AC7B7B;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .red {
    color: #B70101;
    padding: 20px 0;
  }

  .grey {
    color: #8D8D8D;
  }

  .orange {
    color: #C2A3A3;
  }
}

/deep/ .van-dialog {
  padding: 0 20px !important;
  box-sizing: border-box;
}
</style>
